<!DOCTYPE html>
<html lang="en">
<!-- bug1:对象写错，如下的注释
-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id="a">
        <component1 @alertzi='m1'>
        </component1>
    </div>


    <template id="b">
        <div><input @click='alert' type="button" value="调用父组件的方法"></div>
        
    </template>

    <script>
        // var component1 = '#b';这行写错了，应该是下面这样的
        var component1 = {
            template: '#b',
            methods: {
                alert: function() {
                    this.$emit('alertzi');
                }
            }
        };
        new Vue({
            el: '#a',
            data: {
                data1: '要传递给父组件的数据'
            },
            components: {
                component1
                // 上面这行是简写，相当于component1: component1
            },
            methods: {
                m1: function() {
                    alert('父组件的方法')
                }
            }
        })
    </script>

</body>

</html>